<template>
    <div class="music-page">
        <div class="found-more">
            <span class="left-title">发现好歌单</span>
            <span class="right-button">查看更多 ></span>
        </div>
        <div class="recommend-list">
            <van-swipe class="recommend-item" :width="150" :loop="false" :show-indicators="false">
                <van-swipe-item v-for="item in recommendList" :key="item.id">
                    <router-link :to="{ name: 'song-list', query: { id: item.id }}">
                        <img :src="item.picUrl" :alt="item.name" />
                        <span>{{ item.name }}</span>
                        <div class="play-count">
                            <SvgIcon iconName="bofang" />
                            <span>{{ formatPlayCount(item.playCount) }}</span>
                        </div>
                    </router-link>
                </van-swipe-item>
            </van-swipe>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getRecommend } from '@/api/home'
import SvgIcon from '@/components/SvgIcon.vue'
const recommendList = ref([])

// 获取推荐歌单
const getRecommendList = async () => {
  try {
    const { data } = await getRecommend(15)
    recommendList.value = data.result
    console.log(recommendList.value)
  } catch (error) {
    console.log(error)
  }
}
onMounted(() => {
  getRecommendList()
})

// 播放量处理函数
const formatPlayCount = (count) => {
  if (count > 100000000) return (count / 100000000).toFixed(1) + '亿'
  if (count > 10000) return (count / 10000).toFixed(1) + '万'
  return count
}
</script>

<style lang="scss" scoped>
.found-more {
    display: flex;
    justify-content: space-between;
    margin-top: .4rem;
    .left-title {
        font-size: .4rem;
        font-weight: bold;
    }
    .right-button {
        padding: 0 .2rem;
        line-height: .6rem;
        border: 1px solid #ccc;
        border-radius: .4rem;
    }
}
.van-swipe {
    height: 4rem;
    margin-top: .2rem;
}
.van-swipe-item {
    position: relative;
    margin: 0 .11rem;
        img {
            width: 100%;
            height: 3rem;
            border-radius: .3rem;
        }
    span {
        color: #474747;
    }
    .play-count {
        position: absolute;
        display: flex;
        top: .22rem;
        right: .34rem;
        span {
            padding-left: .1rem;
            color: white;
        }
    }
}
</style>
